<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0  minimum-scale=1.0, maximum-scale=2.0" />
<meta name="MobileOptimized" content="240" />
<link rel="stylesheet" type="text/css" href="/mobile/css/base.css"/>
<script type="text/javascript" src="/common/js/zepto.js"></script>
<script type="text/javascript" src="/mobile/scripts/context.js" ></script>
<script type="text/javascript" src="/app/scripts/common_lib.js"></script>
<title>品质从此无忧-麦丰网</title>
<style type="text/css">

body {
	margin: 0px;
	background:#f1f1f1;
	font-family:Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Tohoma,Arial;
	text-align: center;
	width:100%;
}

.div-header {
	width: 100%;
	height: 45px;
	color: #FFF;
	margin: 0 auto;
	line-height: 45px;
	text-align: left;
	background: url(images/red_bg.jpg) repeat;
}

#name{ 
	font-size:18px; 
	line-height:45px; 
	padding-left:0px; 
	margin-left:0px;
	width:200px; 
	height:45px; 
	float:left;
	padding-left: 10px;
}

#user{
	background:url(images/user_white.png) no-repeat center;
	width:32px; 
	height:45px; 
	float:right;
	
}

ul,li{list-style:none; padding: 0;margin: 0;}

.div-leader {
	width: 100%;
	max-width:320px;
	height: 25px;
	background-color: transparent;
	margin: 0 auto;
	/*
	left:50%;
	margin-left:-160px;
	position:fixed; 
	*/
}
.table-leader {
	width: 100%;
	text-align: center;
}

table td {
	text-align: center;
}

.menu1{color:#777;line-height:23px; width:12%;  padding:0px 2px; border-bottom:1px solid #CCC;  font-size:14px; }
.menu2{color:#ff3f40;line-height:23px;  width:12%; padding:0px 2px; border-bottom:1px solid #ff3f40; font-weight:bold; font-size:14px;}

.i_box a {
	padding: 2px 5px;
	background-color: #e9e9e9;
	border: 1px solid #ccc;
	text-decoration: none;
	color: #585858;
	line-height: 20px;
}
.i_box * {
	vertical-align: middle;
}
.i_box input {
	width: 30px;
	height: 18px;
	margin: 0 8px;
	padding: 2px;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 16px;
}

.div-banner {
	width:320px;
	height: 195px;
	background-color: white;
	margin: 0 auto;
	margin-top: 5px;
	/*
	left:50%;
	margin-top: 30px;
	margin-left: -160px;
	position: fixed;
	*/
}

.div-content {
	width: 100%;
	max-width: 330px;
	margin: 0 auto;
	margin-top: 8px;
}
.div-product {
	width: 100%;
	max-width: 330px;
	height: 150px;
	margin: 0 auto;
	margin-top: 8px;
}

.div-image {
	width: 60%;
	height: 100%;
	float: left;
}

.div-name {
	width: 40%;
	height: 40%;
	float: right;
}

.div-description {
	width: 40%;
	height: 60%;
	float: right;
}

.img-product {
	width: 100%;
	height: 100%;
}

.div-footer {
	width: 100%;
	max-width: 330px;
	height:100px;
	background-color: #CCC;
	top: 100%;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 50px;
}

.div-bottom {
	width: 100%;
	height: 50px;
	top: 100%;
	left:-50%;
	margin-left:50%;
	margin-top: -50px;
	position: fixed;
}

.div-loading {
	width:35px;
	height:35px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
	display: none;
}

.img-loading {
	width: 100%;
	height: 100%;
}

#table-bottom { 
	width:100%; 
	height:35px;	
	line-height:35px; 
	background:#333;
	color: #CCC;
	bottom: 0px;
	position: fixed;
}

.td-product-name {
 	background:#b6a98f; 
 	color:#FFFFFF; 
 	font-weight:bold;
 	line-height:25px;
 	text-align: left;"
 }
 
 .td-spec {
 	text-align: left;
 }

.menu-down{float:left; border:1px solid #ff3e3f; background:url(images/select_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#000000; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}
.menu-up{float:left;border:1px solid #CCCCCC; font-size:14px; padding:0px 5px;height:22px; color:#000000; line-height:25px; margin-right:5px;margin-bottom:5px; text-align:center; background:#FFFFFF}
.menu-note{float:left; border:1px solid #666666; background:url(images/note_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#666666; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}


.bitButton{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}
.bitButton1{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg3.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}

.smallButton{ 
	border:0;
	background:url(images/button_bg.jpg) repeat; 
	color:#FFFFFF; 
	line-height:28px; 
	text-align:center;
	width:40px; 
	height:22px; margin:0px; padding:0px; line-height:22px; float:right;	
}
.smallButton1{border:0;height:22px; background:url(images/button_back.jpg) repeat; color:#FFFFFF; text-align:center;}

</style>
</head>
<body>
	<div class="div-header">
		<ul>
			<li id="name">我的购物车</li>
			<li id="user" onclick="location.href='/'"></li>
		</ul>
	</div>
	
	<div class = "div-content">
		<form style="background:#FFFFFF; padding:5px;">
		<table width="100%" border="0" cellspacing="0" cellpadding="5" style="background: #FFF">
			<tr>
			  <th width="60%" height="25" colspan="2" align="left" nowrap="nowrap">商品名称</th>
			  <th width="20%" align="left" nowrap="nowrap">单价</th>
			  <th width="20%" align="left" nowrap="nowrap">数量</th>
			</tr>
			<tr id="tr-empty" style="display: none;">
				<td colspan="4">您的购物车是空的哦。</td>
			</tr>
			<tbody id="tbody-cart">
			</tbody>
			<tr id="tr-cart-total">
			    <td align="left" style="display: none;">
			      <input name="button" type="button" onclick="emptyCart()" class="smallButton" id="button" value="清空购物车" />
			    </td>
			    <td style="text-align: right"><span class="d_chva"><strong>总价：</strong></span></td>
			    <td colspan="2" id="td-cart-total" style="text-align: left;"></td>
			</tr>
		</table>
			
			<input id = "input-order" type="button" value="确认并结算" onclick="submitOrder()"  class="bitButton" style="display: none;"/>
			<input type="button" value="← 查看更多商品" onclick="location.href='/'"  class="bitButton1" />
		</form>
	</div>
	<div class = "div-footer">
		<iframe class = "iframe-view" src="/mobile/footer.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	<div class = "div-bottom" style="display: none;">
		<iframe class = "iframe-view" src="/mobile/bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	<div class="bottom">
		<div class="bottomWrap">
			<iframe src="/mobile/bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		cjl.getTitle();
		getCart();
	});
	
	function getCart() {
		var url = "/cart/list";
		cjl.get(url, {}, function(body) {
			var cart = body;
			var cartList = cart.cartList;
			var total = cart.total;
			if(cartList.length == 0) {
				$("#tr-empty").show();
				$("#tr-cart-total").hide();
				$("#input-order").hide();
			} else {
				$("#tr-empty").hide();
				$("#tr-cart-total").show();
				$("#input-order").show();
			}
			$("#tbody-cart").empty();
			for(var o in cartList) {
				var cartItem = cartList[o];
				var html = '';
				html += '<tr>';
				html += '<td colspan="4" valign="middle" class="td-product-name">产品名称：'+cartItem.product_name+'<input type="button" class="smallButton" value="修改" onclick="location.href=\'cartEdit.html?id='+cartItem.specification_id+'\'" /></td>';
				html += '</tr>';
				html += '<tr>';
				html += '<td colspan="2" valign="middle" class="td-spec">'+cartItem.catalog_name+' '+cartItem.specification_name+'</td>';
				html += '<td valign="middle" nowrap="nowrap" class="td-spec">￥'+cartItem.price.toFixed(2)+'</td>';
				html += '<td align="center" nowrap="nowrap" class="td-spec">'+cartItem.quantity+'</td>';
				html += '</tr>';	
				$("#tbody-cart").prepend(html);
			}
			
			$("#td-cart-total").html('<strong>￥'+total.toFixed(2)+'</strong>');
		});
	}
	
	function emptyCart() {
		var url = "/cart/delete";
		cjl.post(url, {}, function(body) {
			location.reload();
		});
	}
	
	function submitOrder() {
		var url = "/user/state";
		cjl.get(url, {}, function(state) {
			if(!state) {
				window.location.href="/mobile/login.html?jump=cart";
			} else {
				cjl.post("/order/select/cart",{},function(body) {
					window.location.href="/mobile/orderConfirm.html";
				});
			}
		});
	}
	
	
	
</script>
</html>